<template>
	<wsPage title="财务设置">
			<div class="ititle">商户提现设置</div>
			<Row>
				<Col span="12">
				  	<Form ref="merchantInfoForm" :model="merchantInfoForm" :rules="ruleValidate"  class="layout-content-main" :label-width="100">
						<FormItem label="服务费比例:" prop="withdrawHandlingChargeRate"> 
		            		<Input v-model="merchantInfoForm.withdrawHandlingChargeRate" placeholder="请输入服务费收取比例" style="width: 210px"></Input> <span style="padding:0 10px;">%</span>
		        		</FormItem>
		        		<FormItem label="最小服务费:" prop="withdrawMinHandlingCharge">
			            	<Input v-model="merchantInfoForm.withdrawMinHandlingCharge" placeholder="请输入提现金额" style="width: 210px"></Input>	
			     		</FormItem>
				 		<FormItem label="最小提现金额:" prop="withdrawMinAmount">
			            	<Input v-model="merchantInfoForm.withdrawMinAmount" placeholder="请输入最小服务费" style="width: 210px" ></Input>	
			     		</FormItem>
			     		<FormItem>
			     			<Button type="success" @click="saveOk">提交</Button>
			     		</FormItem>
					</Form>
				</Col>
				<Col span="12">
					<Form ref="testForm" :model="testForm" :rules="ruleValidate"  class="layout-content-main" :label-width="100">
						<FormItem label="服务费比例:" prop="withdrawHandlingChargeRate"> 
		            		<Input v-model="testForm.withdrawHandlingChargeRate" placeholder="请输入服务费收取比例" style="width: 200px"></Input> <span style="padding:0 10px;">%</span>
		        		</FormItem>
				 		<FormItem label="提款金额:" prop="withdrawMinAmount">
			            	<Input v-model="testForm.withdrawMinAmount" placeholder="请输入最小服务费" style="width: 200px" ></Input>	
			     		</FormItem>
			     		<FormItem label="最终服务费:">
			            	{{result}}
			     		</FormItem>
			     		<FormItem>
			     			<Button type="success" @click="calcu">计算</Button>
			     		</FormItem>
			     		
					</Form>
				</Col>
			</Row>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	export default {
		data() {
			const regexp1 = (rule,value,callback) =>{
				if(!value){
					return callback(new Error('服务费收取比例不能为空'));
				}
				setTimeout(() => {
					var  regUrl =/^([1-9]\d?(\.\d{1,2})?|0\.\d{1,2}|100)$/;
					if(!regUrl.test(value)){
						callback(new Error('请输入小于100大于0，不超过两位小数的正数'));
					}else{
						callback();
					}
				},100);
			};
			const regexp2 = (rule,value,callback) =>{
				if(!value){
					return callback(new Error('最小提现金额不能为空'));
				}
				setTimeout(() => {
					var  regUrl = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
					if(!regUrl.test(value)){
						callback(new Error('请输入正数'));
					}else{
						callback();
					}
				},100);
			};
			const regexp3 = (rule,value,callback) =>{
				if(!value){
					return callback(new Error('最小服务费不能为空'));
				}
				setTimeout(() => {
					var  regUrl = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
					if(!regUrl.test(value)){
						callback(new Error('请输入正数'));
					}else{
						callback();
					}
				},100);
			};
			const regexp4 = (rule,value,callback) =>{
				if(!value){
					return callback(new Error('退款扣费比例不能为空'));
				}
				setTimeout(() => {
					var  regUrl =/^([1-9]\d?(\.\d{1,2})?|0\.\d{1,2}|100)$/;
					if(!regUrl.test(value)){
						callback(new Error('请输入小于100大于0，不超过两位小数的正数'));
					}else{
						callback();
					}
				},100);
			};
			const regexp5 = (rule,value,callback) =>{
				if(!value){
					return callback(new Error('退款时间不能为空'));
				}
				setTimeout(() => {
					var  regUrl =/^[0-9]*[1-9][0-9]*$/;
					if(!regUrl.test(value)){
						callback(new Error('请输入正整数'));
					}else{
						callback();
					}
				},100);
			};
			return {
				merchantInfoForm:{
					withdrawHandlingChargeRate:'',
					withdrawMinAmount: '',
					withdrawMinHandlingCharge:'',
					medicalRefundHour:'',
					medicalRefundRate:''
				},
				testForm:{
					withdrawHandlingChargeRate:'',
					withdrawMinAmount: ''
				},
				ruleValidate:{
					withdrawHandlingChargeRate: [
                        { required: true, message: '服务费收取比例不能为空' },
                        { validator:regexp1,trigger:'blur'}
                    ],
                    withdrawMinAmount: [
                        { required: true, message: '最小提现金额不能为空' },
                        { validator:regexp2,trigger:'blur'}
                    ],
                    withdrawMinHandlingCharge: [
                        { required: true, message: '最小服务费不能为空'},
                        { validator:regexp3,trigger:'blur'}
                    ],
                    medicalRefundHour: [
                        { required: true, message: '退款时间不能为空' },
                        { validator:regexp5,trigger:'blur'}
                    ],
                    medicalRefundRate: [
                        { required: true, message: '退款扣费比例不能为空'},
                        { validator:regexp4,trigger:'blur'}
                    ]
				},
				rate:0.0,
				result:0,
				chargeRate:0
			}
		},
		computed: {
			
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				const _this = this;
				this.axios.get('/ws/ops/platformFinanceSettings/1').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						var data=res.data;
						_this.merchantInfoForm=data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},	

			//修改及保存
			saveOk() {
				this.$refs["merchantInfoForm"].validate((valid) => {
					if (valid) {
						this.submit();
                    } else {
                        this.$Message.warning('请填写完整信息!');
                    }
                    
               });
			},
			calcu() {
				this.$refs["testForm"].validate((valid) => {
					if (valid) {
						this.result = (this.testForm.withdrawHandlingChargeRate/100)*this.testForm.withdrawMinAmount;
                    } else {
                        this.$Message.warning('请填写完整信息!');
                    }
                    
               });
			},
			submit(){
				let postData_ = this.merchantInfoForm;
				const _this = this;
				this.axios.put('/ws/ops/platformFinanceSettings', postData_).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('修改失败:' + message_);
					}
				});				
			}
		}
	}
</script>

<style scoped>
	.iform{
		padding: 30px;
	}
	.ws-form-select {
		width: 162px;
	}
	.demo-upload-list{
        display: inline-block;
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 10px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
	.layout-content-main{
        padding: 30px;
        float:left;
        justify-content: space-around;
        font-size:14px;
    }
    .layout-content-title {
    	text-align: right;
    	margin-right: 20px;
	}
	  .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-img {
		width: 150px;
		height: 150px;
	}
	.idiv{
		padding-bottom: 24px;
	}
	.ititle{
		color:#47CB89;
		font-size: 16px;
	}

</style>
	
